import React, {useState} from 'react'
import { 
  Table, 
  Tag, 
  Button, 
  Popover,
  Switch 
} from 'antd';
import {
  UserOutlined,
  DeleteOutlined
} from '@ant-design/icons';


export default function RightList() {
  const [dataSource, setDataSource] = useState([
    {
      id: '1',
      title: '胡彦斌',
      key: '/user',
      pagepermisson: 1,
      children: [
        {
          id: '1-1',
          title: '周星星',
          key: '32',
          pagepermisson: 1
        }        
      ]
    },
    {
      id: '2',
      title: '炽蓝仙野',
      key: '/content'
    }
  ])

  const columns = [
    {
      title: 'ID',
      align: 'center',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '权限名称',
      align: 'center',
      dataIndex: 'title'
    },
    {
      title: '权限路径',
      align: 'center',
      dataIndex: 'key',
      render: (key) => {
        return <Tag color="magenta">{key}</Tag>
      }
    },
    {
      title: '操作',
      align: 'center',
      render: (item) => {
        return <div>
        <Button 
          style={{marginRight: '5px'}}
          type="primary" 
          shape="circle" 
          icon={<UserOutlined />} 
          size='middle' />
        <Popover 
          trigger={item.pagepermisson === undefined ? '' : 'click'}
          content={
            <div>
              <Switch 
                checked={item.pagepermisson}
                onChange={() => switchMetods(item)}
              ></Switch>
            </div>
          } 
          title="配置项"
        >
          <Button 
            type="ghost" 
            shape="circle" 
            icon={<DeleteOutlined />} 
            size='middle' 
            disabled={item.pagepermisson === undefined}
          />
        </Popover>
        </div>
        
      }
    }
  ]
  
  const switchMetods = (item) => {
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1
    setDataSource([...dataSource])
  }


  return (
    <div>
      <Table 
        dataSource={dataSource} 
        columns={columns}
        pagination={{
          pageSize: 10
        }}
      />
    </div>
  )
}
